<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../fonticons/iconfont.css" rel="stylesheet" />
		<style>
			.phone-box{
				width: 100%;
				height:130px;
				background-color: #000000;
				border-bottom-left-radius: 100%;
				/* border-bottom-right-radius: 100%; */
				margin-bottom: 80px;
				position: relative;
			}
			.phone-box .img-box{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 25%;
				border-radius: 50% 20% 100% 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background-color: #000000;
				width:140px;
				height: 140px;
			}
			/* .phone-box .img-box img:nth-child(1){
				animation: xuanzhuan 3s  infinite linear;
			} */
		
			@keyframes xuanzhuan {
				0%{
					transform: rotate(-20deg) ;
				}
				50%{
					transform: rotate(20deg) ;
				}
				100%{
					transform: rotate(-20deg) ;
				}
			}
			@keyframes shanshuo{
				0%{
					box-shadow: 0 0 12px rgba(0,0,0,.2);
				}
				50%{
					box-shadow: 0 0 12px rgba(0,0,0,.5);
				}
	
				100%{
					box-shadow: 0 0 12px rgba(0,0,0,.2);
				}
			}
			.list-box{
				width: 100%;
				padding: 2px 3vw;
			}
			.mui-table-view{
				background-color:#fff;
				box-sizing: border-box;
				animation: shanshuo 2s infinite;
			}
			.mui-table-view .mui-table-view-cell{
				border-radius: 5px;
				height: 60px;
				padding: 0;
			}
			.mui-table-view .mui-table-view-cell .list-box-item-content{
				position: absolute;
				right: 33px;
				color:#9e9e9e;
			}
			.mui-table-view .mui-table-view-cell a{
				height:100%;
				padding:20px;
				margin: 0 0;
			}
			.mui-table-view .mui-table-view-cell:hover{
				background-color: transparent;
			}
			.mui-table-view:after,.mui-table-view::before{
				background-color: transparent;
			}
			.mui-content{ 
				height: 100vh;
				background-color: #fff;
			}
			.full-img{
				width:130px;
				height:130px;
				border-radius: 50%;
			}
			.full-img-bf{
				position: absolute;z-index: 99;width: 160px;
				transform: translate(-20px,33px) rotate(6deg);
			}
			
			.qr_code_box{
				width: 95%;
				height: 50vh;
				left: 50%;
				transform: translateX(-50%);
				background-color: #fff;
				box-shadow: 0 0 10px rgba(0,0,0,.6);
				top: -400px;
				border-radius: 14px;
				z-index: 9999;
				position: absolute;
				padding: 0 20px;
				box-sizing: border-box;
				
			}
			.qr_code_box img{
				border-radius: inherit;
			}
			.qr_code_box .close-btn{
				display: inline-block;
				width: 30px;
				position: absolute;
				height: 30px;
				right: 10px;
				border-radius: 50%;
				background-color: rgba(0,0,0,.5);
				color:#fff;
				font-size: 30px;
				font-weight: bold;
				top: 10px;
				z-index: 999;
			}
			
			@keyframes model-show{
				0%{
					top: -400px;
				}
				100%{
					top:150px;
				}
			}
			@keyframes model-show-rvs{
				0%{
					top: 150px;
				}
				100%{
					top:-400px;
				}
			}
			.model-show-c{
				animation:model-show .2s forwards ;
				animation-direction: alternate ;
			}
			.model-show-c-reverse{
				animation:model-show-rvs .2s forwards ;
				animation-direction: alternate ;
			}
			.qr_img{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			#logout-btn{
				height: 60px;width: 100%;background-color: #000000;text-align: center;line-height: 60px;color:#fff;
			}
			#logout-btn:active{
				background-color: #3e3e3e;
			}
			.mui-table-view-cell.mui-collapse .mui-collapse-content{
				padding: 0;
				margin: 0;
			}
		</style>
	</head>

	<body>
	
		<div class="mui-content">
			
			<div class="phone-box">
				<div class="img-box">
					<img  src="../../img/def_photo.jpg" 
					class="full-img preview-img-tap" id="full-img">
					<!-- 装饰物 -->
					<img src="../../img/bianfu03.png" class="full-img-bf" >
				</div>
			</div>
			<div class="list-box">
				<ul class="mui-table-view" style="border-radius: 5px;">                           
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="name-box">
							昵称
							<span class="list-box-item-content" >
								花花的泪
							</span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="username-box">
							易信号
							<span class="list-box-item-content" style="right: 20px;">
								Y44256112
							</span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="qr_code" >
							二维码名片
								<i class="list-box-item-content iconfont icon-erweima"></i>
						</a>
					</li>
					 <li class="mui-table-view-cell mui-collapse" style="min-height: 60px;height: auto;">
						<a class="mui-navigate-right" href="#">更多</a>
						<div class="mui-collapse-content">
							<div id="logout-btn" >
								退出
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="logo-box" style="position: fixed ;width:100%;height:200px">
				<img src="../../img/bf02.jpg" style="width:inherit">
			</div>
		
			
		</div>
		
		<script src="../../js/mui.js"></script>
		<script src="../../js/main.js"></script>
		<script src="../../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init({
				gestureConfig:{
					longtap:true
				}
			})
			mui.plusReady(function () {
				flushData(plus.storage.getItem("userInfo"));
				
				// 长按上传图片
				mui("#full-img")[0].addEventListener("longtap",function(){
					plus.device.vibrate(10);
					 plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
						{title:"拍照"},  
						{title:"从相册中选择"}  
					]}, function(e){//1 是拍照  2 从相册中选择  
						switch(e.index){  
							case 1:openCamera();break;  
							case 2:clickGallery();break;  
						}  
					});  
				})
					
				
				mui(".mui-table-view .mui-table-view-cell a").each((i,obj)=>{
					obj.addEventListener("longtap",function(){
						plus.device.vibrate(10);
						var text = $(this).find("span").html();
						if(text){
							setZTB(text);
						}
					})
				})
				
				mui("#qr_code")[0].addEventListener("tap",function(){
					plus.device.vibrate(10);
					var entity = JSON.parse(plus.storage.getItem("userInfo"));
					_SERVER.user.getQrCode(entity.token).then(res=>{
						var imgData = res.data;
						imgData = "data:image/png;base64,"+imgData;
						_MODEL.open(_MODEL.getHtml(imgData));
					})
				})
				mui(document).on("tap",".qr_code_box .close-btn",function(){
					_MODEL.close();
				})
				mui("#logout-btn")[0].addEventListener("tap",function(){
					mui.confirm("是否要退出用户？","退出",["确认","取消"],function(obj){
						if(obj.index == 0){
							plus.nativeUI.showWaiting();
							plus.storage.removeItem("userInfo");
							plus.webview.create("../login.html","login.html",{},{waitCloseWebView:plus.webview.currentWebview().parent().id});
						}
					},"div")
				})
			})
			
			const _MODEL = {
				getHtml(imgUrl="../../img/timg.gif"){
					var html= '';
						html+='<div class="qr_code_box model-show-c">';
							html+='<span class="close-btn mui-icon mui-icon-closeempty" ></span>';
							html+='<img src="'+imgUrl+'" class="qr_img" style="height: inherit;">';
						html+='</div>';
					return html;
				},
				open(html){
					$(".mui-content").prepend(html);
				},
				close(el=".qr_code_box"){
					
					$(el).addClass("model-show-c-reverse");
					setTimeout(()=>{
						$(el).remove();
					},300);
				}
			}
			  //打开系统照片选择器
			function clickGallery() {  
					// 系统照片选择器
				plus.gallery.pick(function(path) {  
					zipAndUploadPhoto(path);
				}, function(err) {});  
			};  
			const flushData = function(entity){
				entity = JSON.parse(entity)
				console.log(entity.photoDefault);
				if(entity.photoDefault){
					$("img.full-img").attr("src",entity.photoDefault);
				}
				
				$("#name-box span").html(entity.name);
				$("#username-box span").html(entity.username);
			}
			
			function setZTB(copy){
				//判断是安卓还是ios
				if(mui.os.ios){
					//ios
					var UIPasteboard = plus.ios.importClass("UIPasteboard");
					var generalPasteboard = UIPasteboard.generalPasteboard();
					//设置/获取文本内容:
					generalPasteboard.plusCallMethod({
						setValue:copy,
						forPasteboardType: "public.utf8-plain-text"
					});
					generalPasteboard.plusCallMethod({
						valueForPasteboardType: "public.utf8-plain-text"
					});
					mui.toast("已成功复制到剪贴板");
				}else{
					//安卓
					var context = plus.android.importClass("android.content.Context");
					var main = plus.android.runtimeMainActivity();
					var clip = main.getSystemService(context.CLIPBOARD_SERVICE);
					plus.android.invoke(clip,"setText",copy);
					mui.toast("已成功复制到剪贴板");
				}
			}
			
			function openCamera(){
				plus.camera.getCamera().captureImage(function(e){
					console.log(JSON.stringify(e))
					plus.io.resolveLocalFileSystemURL( e, function(url){
						console.log(url.toLocalURL())
						zipAndUploadPhoto(url.toLocalURL());
					});
				},function(err){},{filename:'_doc/camera/'})
			}
			
			// 压缩并上传图片
			const zipAndUploadPhoto = function(path){
				// 压缩照片
				    plus.zip.compressImage({  
				        src: path,  
				        dst: "_doc/chat/gallery/" + path,  
				        quality: 20,   
				        overwrite: true  
				    }, function(e) {  
						// 等待Model
				        var wt=plus.nativeUI.showWaiting();
						// 创建上传任务
				        var task = plus.uploader.createUpload(_GLOBAL_SERVER_HOST+"/file/upload", {  
							method: "post"  
						}, function(t, status) {  
							if(status == 200) { 
								var res = JSON.parse(t.responseText);
								if(res.code === "200"){
									console.log("上传成功："+res.data.url);
									var entity = JSON.parse(plus.storage.getItem("userInfo"));
									entity.photoDefault = res.data.url;
									plus.storage.setItem("userInfo",JSON.stringify(entity));
									$("img.full-img").attr("src",entity.photoDefault);
									// 更新用户新上传的图片
									_SERVER.user.updatePhoto(entity.id,res.data.url).then(res=>{
										wt.close(); //关闭等待提示按钮
									})
								}else{ 
									wt.close(); //关闭等待提示按钮
									mui.toast(res.msg);
								}
							}else{
								wt.close(); //关闭等待提示按钮
								alert("上传失败："+status);
							}
						});  
						// 添加文件
				        task.addFile(e.target,{key:"file"}); 
						// 开始上传
				        task.start();  
				    }, function(err) {  
				        console.error("压缩失败：" + err.message);  
				    });  
			}

		</script>
	</body>

</html>
